<template>
  <div>
    <header class="page-header">
      <el-form :inline="true">
        <el-row>
            <el-col :span="9">
            <el-form-item label="区域/国家">
              <el-cascader
                :options="areaList"
                v-model="areaCode"
              >
              </el-cascader>
            </el-form-item>
          </el-col>


          <el-col :span="5">
            <el-form-item label="状态">
              <el-select v-model="status" :style="{width: '110px'}"  placeholder="请选择活动区域">
                <el-option label="已发布" :value="0"></el-option>
                <el-option label="全部" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10" class="text-right">
            <el-form-item>
              <el-input
                @keydown.native.13="searchSolutions"
                v-model.trim="searchKeyword"
                placeholder="搜索筛选项"
                suffix-icon="el-icon-search"/>
            </el-form-item>
            <el-button type="danger" @click="searchSolutions">查询</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-row class="text-right">
        <el-col :span="24">
          <el-button type="primary" @click="addSolution" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" @click="delSolutions" icon="el-icon-minus">删除</el-button>
          <el-button type="primary" @click="multiplex">选择复用</el-button>
          <el-button type="primary" @click="publish" :disabled="status === 2">批量发布</el-button>
        </el-col>
      </el-row>
    </header>

    <div class="table-container">
      <el-table
        :data="solutions"
        @selection-change="onSelectSolutions">
        <el-table-column label-class-name="text-center" class-name="text-center" type="selection"></el-table-column>
        <!--方案名称-->
        <el-table-column prop="name" :label="$t('pages.solution.col_name')"></el-table-column>
        <!--方案特性-->
        <el-table-column prop="solutionOverview" :label="$t('pages.solution.col_features')"></el-table-column>
        <!--是否推荐到首页 0: 否 1：是-->
        <el-table-column
          label-class-name="text-center"
          class-name="text-center"
          :label="$t('pages.solution.col_recommand')">
          <template slot-scope="scope">
            {{scope.row.recommand ? '是':'否'}}
          </template>
        </el-table-column>
        <!--推荐排序-->
        <el-table-column label-class-name="text-center" class-name="text-center"  prop="orders" :label="$t('pages.solution.col_sort')"></el-table-column>
        <!--操作人-->
        <el-table-column prop="createUser" :label="$t('pages.solution.col_actioner')"></el-table-column>
        <!--发布状态 0：未发布 1: 已发布-->
        <el-table-column
          label-class-name="text-center"
          class-name="text-center"
          :label="$t('pages.solution.col_status')">
          <template slot-scope="scope">
            {{scope.row.status ? '已发布':'未发布'}}
          </template>
        </el-table-column>
        <!--操作-->
        <el-table-column label-class-name="text-center" class-name="action text-center" :label="$t('pages.solution.col_action')">
          <template slot-scope="scope">
            <a href="#" class="text-warning" @click.prevent="editDetail(scope.row)">编辑</a>
            <a href="#" class="text-info" @click.prevent="viewDetail(scope.row)">详情</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="onCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </div>

    <!--添加方案的弹窗-->
    <el-dialog width="85%" :visible.sync="solutionDialog">
      <el-form :model="solution">
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属目录" :label-width="labelWidth">
              <el-input readonly="" disabled=""  v-model="solution.catalogName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="方案名称" :label-width="labelWidth">
              <el-input  v-model="solution.name" placeholder="请输入方案名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="关联筛选项" :label-width="labelWidth" class="select-tree">
              <!--icon="caret-bottom"-->
              <!--v-model="solution.filters"-->
              <el-input
                placeholder="点击关联筛选项"
                :suffix-icon="isShowSelect?'el-icon-arrow-up':'el-icon-arrow-down'"
                readonly="readonly"
                @click.native="isShowSelect = !isShowSelect"
              >
              </el-input>

              <!--<el-select-->
              <!--:popper-append-to-body="false"-->
              <!--:style="{width: '100%'}"-->
              <!--@remove-tag="onRemoveTag"-->
              <!--@click.native="isShowSelect = !isShowSelect"-->
              <!--v-model="solution.filters" multiple placeholder="请选择">-->
              <!--<el-option-->
              <!--v-for="item in selectsFilters"-->
              <!--:key="item.id"-->
              <!--:label="item.label"-->
              <!--:value="item.id">-->
              <!--</el-option>-->
              <!--</el-select>-->

              <div class="filterTree" v-if="isShowSelect" v-on-clickaway="away">
                <el-tree
                  empty-text="暂无数据"
                  show-checkbox
                  node-key="id"
                  @check-change="nodeClick"
                  @node-click="nodeClick"
                  ref="tree"
                  :check-on-click-node="true"
                  :style="{position: 'absolute'}"
                  :data="filters"
                >
                </el-tree>
              </div>



              <!--<el-select   v-model="solution.filters" placeholder="请选择关联筛选项">-->
              <!--<el-option label="区域一" value="shanghai"></el-option>-->
              <!--<el-option label="区域二" value="beijing"></el-option>-->
              <!--</el-select>-->
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="是否推荐" :label-width="labelWidth">
              <el-checkbox v-model="solution.recommend" true-label="Y" false-label="N"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="filed-module">
          <h3>Solution Overview</h3>
          <ueditor @input="modleMsg" v-model="solution.solutionOverview"></ueditor>
        </div>

        <div class="filed-module">
          <h3>KeyTechnology</h3>
          <ueditor @input="modleMsg2" v-model="solution.keyTechnology"></ueditor>
        </div>

        <div class="filed-module">
          <h3>Product List</h3>
          <div class="product-wrap">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              editable
              @edit="editTabs">
              <el-tab-pane
                :key="item.category"
                v-for="(item, index) in solution.products"
                :label="item.category"
                :name="item.category"
              >
                <el-table
                  size="mini"
                  :border="true"
                  :data="item.products"
                  @selection-change="onSelectProduct">
                  <el-table-column
                    label-class-name="text-center"
                    class-name="text-center"
                    type="selection"></el-table-column>
                  <el-table-column label="Category" prop="category" show-overflow-tooltip></el-table-column>
                  <el-table-column label="Status" prop="status" show-overflow-tooltip></el-table-column>
                  <el-table-column label="Configuration Requirement" prop="requirement" show-overflow-tooltip></el-table-column>
                  <!-- <el-table-column label="Product Type" prop="type"></el-table-column> -->
                  <el-table-column label="Product Model" prop="model" show-overflow-tooltip></el-table-column>
                  <el-table-column label="Picture" prop="picture" show-overflow-tooltip></el-table-column>
                  <el-table-column label="QTY" prop="QTY" show-overflow-tooltip></el-table-column>
                  <!-- <el-table-column label="Unit Price(USD)" prop="price"></el-table-column> -->
                  <!-- <el-table-column label="Total Price(USD)" prop="totalPrice"></el-table-column> -->
                  <el-table-column label="Packing Volume（cm）" prop="volume" show-overflow-tooltip></el-table-column>
                  <el-table-column label="Packing Volume（cm）" prop="weight" show-overflow-tooltip></el-table-column>
                  <el-table-column label="P/N " prop="pn" show-overflow-tooltip></el-table-column>
                  <el-table-column label="Remark" prop="remark" show-overflow-tooltip></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
            <div class="tab-action">
              <el-button>导入</el-button>
              <el-button @click="onAddProduct">增加</el-button>
              <el-button @click="onRmProduct" type="danger">删除</el-button>
            </div>
          </div>
        </div>

        <div class="filed-module">
          <h3>Related files</h3>
          <div class="flies-wrap">
            <div class="text-right files-action">
              <el-upload
                :style="{display: 'inline-block'}"
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :before-upload="beforeUpload"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadFaild">
                <el-button size="small" :loading="uploadLoading" type="primary">{{ uploadLoading?'正在上传':'点击上传'}}</el-button>
              </el-upload>
              <el-button @click="rmFiles" type="danger">删除</el-button>
            </div>
            <el-table size="small" :border="true" :data="solution.files" @selection-change="onSelectFiles">
              <el-table-column type="selection"></el-table-column>
              <el-table-column label="日期" prop="date"></el-table-column>
              <el-table-column label="文件名称" prop="fileName"></el-table-column>
              <el-table-column label="是否显示主图" prop="isShow"></el-table-column>
              <el-table-column label="上传人" prop="author"></el-table-column>
            </el-table>

          </div>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDialog = false">确 定</el-button>
        <el-button type="danger" @click="addDialog = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--方案复用-->
    <el-dialog width="65%" :visible.sync="multiplexDialog">
      <el-form>
        <el-row :gutter="14">
          <el-col :span="8" class="multiple-infos">
            <ul>
              <li v-for="item in infos" :key="item.id">
                <h3>{{item.title}}</h3>
                <el-checkbox-group v-model="item.checkList">
                  <el-checkbox v-for="checkbox in item.checkboxs" :label="checkbox.id" :key="checkbox.name">{{checkbox.name}}</el-checkbox>
                </el-checkbox-group>
              </li>
            </ul>
          </el-col>
          <el-col :span="16" class="multiplex-solution-wrap">
            <div :style="{marginBottom: '15px'}">
              <el-input placeholder="搜索筛选项" suffix-icon="el-icon-search"></el-input>
            </div>
              <el-table class="table-center" :border="true" :data="querySolutions">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="features" prop="features"></el-table-column>
                <el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column label="是否推荐" prop="recommand"></el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <el-row :style="{marginTop: '50px'}" class="text-center">
          <el-button type="primary" @click="multiplexDialog = false">确 定</el-button>
          <el-button type="danger" @click="multiplexDialog = false">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <!--批量发布-->
    <el-dialog :visible.sync="publishDiaolg">
      <el-form>
        <el-tree
          :data="datas"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps">
        </el-tree>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { mixin as clickaway } from 'vue-clickaway';
  import ueditor from '@/components/ueditor';
  const filters = [{
    id: 1,
    label: '一级 2',
    children: [{
      id: 3,
      label: '二级 2-1',
      children: [{
        id: 4,
        label: '三级 3-1-1'
      }, {
        id: 5,
        label: '三级 3-1-2'
      }]
    }, {
      id: 2,
      label: '二级 2-2',
      children: [{
        id: 6,
        label: '三级 3-2-1'
      }, {
        id: 7,
        label: '三级 3-2-2'
      }]
    }]
  }]
  const products = [
    {id: 0, category: 'Entrance', status: 'Released', requirement: 'Reauired', type: '3MP Cameras', model: 'ITC314-PH2A-F3', PICTURE: 'IMAGE', qty: '1', price: '200', volume: '99*33*24', weight: 5, pn: '1.0.0.1.09.11168', remark: 'recommand'},
    {id: 1, category: 'Entrance', status: 'Released', requirement: 'Reauired', type: '3MP Cameras', model: 'ITC314-PH2A-F3', PICTURE: 'IMAGE', qty: '1', price: '200', volume: '99*33*24', weight: 5, pn: '1.0.0.1.09.11168', remark: 'recommand'},
    {id: 2, category: 'Entrance', status: 'Released', requirement: 'Reauired', type: '3MP Cameras', model: 'ITC314-PH2A-F3', PICTURE: 'IMAGE', qty: '1', price: '200', volume: '99*33*24', weight: 5, pn: '1.0.0.1.09.11168', remark: 'recommand'},
    {id: 3, category: 'Entrance', status: 'Released', requirement: 'Reauired', type: '3MP Cameras', model: 'ITC314-PH2A-F3', PICTURE: 'IMAGE', qty: '1', price: '200', volume: '99*33*24', weight: 5, pn: '1.0.0.1.09.11168', remark: 'recommand'},
  ]
  const solution = {
    // 所属目录
    catalogName: '1',
    // 方案名称
    name: '1111',
    // 筛选项值关联
    filters: [4, 5],

    // 是否推荐
    recommend: 'N',

    solutionOverview: '',
    keyTechnology: '',

    products: [
      { category: '分类1', products: products },
      { category: '分类2', products: products },
      { category: '分类3', products: products }
    ],

    files: [
      {id: 0, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
      {id: 1, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
      {id: 2, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
      {id: 3, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
      {id: 4, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
    ]

  }

  let mockAreaCountryData = [
    {
      value: 'headerQuarter',
      label: '总部',
      children: [{
        value: 'cn',
        label: '中国',

      }, {
        value: 'in',
        label: '硬度',

      }]
    }, {
      value: 'zujian',
      label: '区域',
      children: [{
        value: 'basic',
        label: 'Basic',

      }, {
        value: 'form',
        label: 'Form',

      }]
  }]

  export default {
    mixins: [ clickaway ],
    props: ['currentCatalog'],
    data () {
      return {
        // 批量发布
        publishDiaolg: false,

        solutions: [],
        currentPage: 1,
        pageSize: 10,
        totalPage: 10,

        action: '',
        area: 0,
        areaCode: [],
        areaList: mockAreaCountryData,
        status: 1,

        // 添加、修改
        selectsFilters: [{
          id: 4,
          label: '三级 3-1-1'
        }, {
          id: 5,
          label: '三级 3-1-2'
        }],
        isShowSelect: false,
        filters,
        solutionDialog: false,
        labelWidth: '100px',
        solution: {
          // 所属目录
          catalogName: '1',
          // 方案名称
          name: '1111',
          // 筛选项值关联
          filters: [4, 5],

          // 是否推荐
          recommend: 'N',

          solutionOverview: '',
          keyTechnology: '',

          products: [
            { category: '分类1', products: products },
            { category: '分类2', products: products },
            { category: '分类3', products: products }
          ],

          files: [
            {id: 0, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
            {id: 1, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
            {id: 2, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
            {id: 3, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
            {id: 4, date: '2017-01-02 21:11:12', fileName: 'a.pdf', isShow: '是', author: 'abc'},
          ]

        },
        uploadLoading: false,
        editableTabsValue: '',
        selectFiles: [],

        // 方案复用
        multiplexDialog: false,
        infos: [
          {id: 0, title: '基本信息', checkboxs: [{id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}]},
          {id: 1, title: '基本信息', checkboxs: [{id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}]},
          {id: 2, title: '基本信息', checkboxs: [{id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}]},
          {id: 3, title: '基本信息', checkboxs: [{id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}]},
          {id: 4, title: '基本信息', checkboxs: [{id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}, {id: 0, name: '关联选项xxx'}]}
        ],
        querySolutions: [
          {id: 0, name: '方案1', features: 'xxx---目录筛选项条件', sort: 1, recommand: 'Y'},
          {id: 1, name: '方案2', features: 'xxx---目录筛选项条件', sort: 2, recommand: 'Y'},
          {id: 2, name: '方案3', features: 'xxx---目录筛选项条件', sort: 3, recommand: 'Y'},
          {id: 3, name: '方案4', features: 'xxx---目录筛选项条件', sort: 4, recommand: 'Y'},
        ],

        searchKeyword: '',
        // 选中的solutions
        selectSolutions: []
      }
    },
    created () {

    },
    watch: {
      currentCatalog () {
        if (this.currentCatalog.id) {
          this.searchSolutions()
        }
      }
    },

    methods: {
      // 查看
      viewDetail () {

      },

      // 编辑
      editDetail (solution) {
        this.action = 'update'
        this.solution = solution
        if (Array.isArray(this.solution.products) && this.solution.products[0]) {
          this.editableTabsValue = this.solution.products[0].category
        }

        this.solutionDialog = true

        setTimeout(() => {
          this.$refs.tree.setCheckedKeys([4]);
        })

        // this.
      },
      // 当前页改变
      onCurrentChange () {},

      // select 选择
      onSelectSolutions (value) {
        this.selectSolutions = value
      },

      /* 富文本回调 */
      modleMsg (data) {
        console.log(data)
      },
      modleMsg2 (data) {
        console.log(data)
      },

      addSolution () {
        this.action = 'add'
        this.solutionDialog = true
      },

      nodeClick (node) {
        const selects = this.$refs.tree.getCheckedNodes().filter(item => !Array.isArray(item.children))
        this.selectsFilters = selects

        console.log(node)
        this.solution.filters = selects.map(item => item.id)
      },

      // 添加方案弹窗添加产品分类
      onAddProduct () {
        const AllProducts = this.solution.products || []
        // 找到是在哪个分类下添加产品
        const category = AllProducts.find(item => item.category === this.editableTabsValue)
        category.products.push(products[0])
      },
      away () {
        this.isShowSelect = false
      },

      // 删除方案弹窗添加产品分类
      onRmProduct () {
        // 找到是在哪个分类下添加产品
        const AllProducts = this.solution.products || []
        const category = AllProducts.find(item => item.category === this.editableTabsValue)
        // 判断是否有选中的茶农
        if (!category.selectProduct || (Array.isArray(category.selectProduct) && category.selectProduct.length < 1)) {
          return this.$alert('请至少选择一个产品进行删除', '', {
            confirmButtonText: '确定',
          })
        }
        this.$confirm('是否删除选中的产品', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'el-button--primary',
          cancelButtonClass: 'el-button--danger',
          type: 'warning'
        }).then(() => {
          category.selectProduct.forEach(item => {
            category.products = category.products.filter(item2 => item.id !== item2.id)
          })
        })
      },
      // 显示添加的弹窗
      onSelectProduct (value) {
        const AllProducts = this.solution.products || []
        // 找到是在哪个分类下添加产品
        const category = AllProducts.find(item => item.category === this.editableTabsValue)
        category.selectProduct = value
      },

      // 操作tabs
      editTabs (targetName, action) {
        const self = this
        switch (action) {
          case 'add':
            this.$prompt('请输入分类名称', '', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              confirmButtonClass: 'el-button--primary',
              cancelButtonClass: 'el-button--danger',
              // inputValue: action === 'add' ? '目录名称' : data.name,
              inputPlaceholder: '请输入目录名称',
              inputValidator (value) {
                if (!value || !(value.trim())) {
                  return '请输入分类名称'
                }
                // 判断填写的名称是否存在
                const hasCategoryName = self.solution.products.some(item => item.category === value)
                if (hasCategoryName) {
                  return '您输入的分类名称已存在'
                }
              },
              inputErrorMessage: '请输入分类名称'
            }).then(({value}) => {
              this.solution.products.push({category: value, products: []})
            })
            break;

          case 'remove':
            this.$confirm('是否删除选中的分类', '', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(targetName)
              this.solution.products = this.solution.products.filter(item => item.category !== targetName)
            })
            break;
        }
      },
      // 文件上传成功
      uploadSuccess () {
        this.uploadLoading = false
      },
      beforeUpload () {
        this.uploadLoading = true
      },
      // 文件上传失败
      uploadFaild () {
        this.uploadLoading = false
      },

      // 删除文件
      rmFiles () {
        if (this.selectFiles.length < 1) {
          return this.$alert('请选择至少选择一个文件进行删除', '', {
            confirmButtonText: '确定'
          })
        }

        this.$confirm('是否删除选中的文件？', '', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonClass: 'el-button--primary',
          cancelButtonClass: 'el-button--danger',
        }).then(() => {
          const ids = this.selectFiles.map(item => item.id)
          ids.forEach(item => {
            this.solution.files = this.solution.files.filter(file => file.id !== item)
          })
        })
      },

      // 搜索
      async searchSolutions () {
        const params = {
          programDirectoryId: this.currentCatalog.id,
          pageNo: this.page || 0,
          pageSize: 10
        }
        this.$http({
          url: this.$http.adornUrl('prm-os-srv-prod/product/programme/list'),
          method: 'post',
          data: this.$http.adornData(params)
        }).then(data => {
          if (data && data.code === 0) {
            this.solutions = data.page.list;
            this.totalPage = data.page.totalPage;
          }
        })
      },
      // 批量发布方案
      async publish () {
        if (this.selectSolutions.length < 1) {
          this.$alert('请至少选择一个方案进行发布', '', {
            confirmButtonText: '确定',
          })
        } else {
          // 获取到方案ID 进行批量删除
          const ids = this.selectSolutions.map((item) => item.id)
          console.log(ids)
          this.publishDiaolg = true
        }
      },
      // 删除选择方案
      async delSolutions () {
        console.log(this.selectSolutions)
        // 判断是否有选中的方案
        if (this.selectSolutions.length < 1) {
          this.$alert('请选择至少选择一个方案进行删除', '', {
            confirmButtonText: '确定'
          })
        } else {
          // 获取到方案ID 进行批量删除
          const ids = this.selectSolutions.map((item) => item.id)
          console.log(ids)
          const params = {
            idList: ids
          }
          this.$http({
            url: this.$http.adornUrl('/prm-os-srv-prod/product/programme/delete'),
            method: 'post',
            data: this.$http.adornData(params)
          }).then(data => {
            if (data && data.code === 0) {
              this.currentPage = 0;
              this.searchSolutions()
            }
          })
        }
      },

      // 选择复用
      multiplex () {
        if (this.selectSolutions.length !== 1) {
          this.$alert('请选择选择一个方案进行复用', '', {
            confirmButtonText: '确定',
          })
        } else {
          // 获取到方案ID 进行批量删除
          const ids = this.selectSolutions.map((item) => item.id)
          console.log(ids)
          this.multiplexDialog = true
        }
      },

      onSelectFiles (values) {
        this.selectFiles = values
      }
    },
    components: {
      // SolutionTable,
      ueditor,
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../element-variables";
  .page-header{
    margin-bottom: 18px;
  }
  .tab{
    overflow: hidden;
    padding: 7px 0 0;
    margin: 0 0 10px 0;
    li{
      list-style: none;
      margin-right: 20px;
      float: left;
      color: #666;
      padding-bottom: 5px;
      border-bottom: 3px solid transparent;
      a{
        text-decoration: none;
        color: inherit;
      }

      &.active{
        color: $--color-danger;
        border-bottom-color: $--color-danger;
      }
    }
  }

  .product-wrap{
    position: relative;
    .tab-action{
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .tab-action {
    .el-button{
      margin-left: 8px;
    }
  }

  .files-action{
    margin-bottom: 5px;
  }

  .filed-module{
    margin-bottom: 20px;
    h3{
      font-size: 14px;
      color: #666;
      font-weight: normal;
    }
  }

  .filterTree{
    position: absolute;
    overflow: auto;
    z-index: 99999;
    width: 100%;

    height: 260px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 5px 0;


    .el-tree{
      width: 100%;
      margin: 12px 0;
    }
  }

  .multiple-infos{
    ul{
      padding: 12px;
      border: 1px solid #dadada;
    }

    h3{
      font-weight: 500;
      color: #333;
      font-size: 14px;
    }
  }
</style>
<style scoped>
  .multiple-infos >>> .el-checkbox{
    margin-left: 0;
    margin-bottom: 5px;
    margin-right: 15px;
    font-weight: normal;
  }

  .select-tree >>> .el-select-dropdown{
    display: none;
  }
  .flies-wrap >>> .cell{
    text-align: center;
  }
  .product-wrap >>> th,
  .flies-wrap >>> th{

    color: #333;
    font-weight: 500;
  }
  .product-wrap >>> .cell{
    padding-right: 5px;
    padding-left: 5px;
  }
  .product-wrap >>> th div{
    white-space: nowrap;
  }
  .product-wrap >>> .el-tabs:after{
    content: '';
    width: 100%;
    height: 1px;
    background: #e4e7ed;
    position: absolute;
    left: 0;
    top: 38px;
  }
  .product-wrap >>> .el-tabs__new-tab{
    display: inline-block;
    height: 38px;
    color: #666;
    font-size: 24px;
    width: 38px;
    margin: 0 0 0 6px;
    line-height: 38px;
    border-bottom: none;
  }
  .product-wrap >>> .el-tabs__header{
    display: inline-block;
    padding-right: 200px;
  }

  .product-wrap >>> .el-tabs__item{
    height: 38px;
    line-height: 38px;
  }
</style>
